<template>
	<view class="main">
		<view class="title_bar">
			<topCommonTitleBar arrow="white" title="我的邀请" titleColor='white'></topCommonTitleBar>
		</view>

		<view class="header_wrap"></view>

		<view class="content">
			<view class="invite_num flex_between">
				<view class="num_item">
					<text class="person_num">直接邀请</text>
					<text class="num fz36">{{ list.onecount }}</text>
				</view>
				<view class="num_item ">
					<text class="person_num">累计邀请人数</text>
					<text class="num fz48">{{ list.allcount }}</text>
				</view>

				<view class="num_item">
					<text class="person_num">间接邀请</text>
					<text class="num fz36">{{ list.secondlist }}</text>
				</view>
			</view>

			<view class="invite_list">
				<view class="header justify_around">
					<view :class="{ 'tab_active': tabsIndex == index }" v-for="item, index in inviteType"
						@click="changTabs(item, index)" :key="index">{{ item.name }}
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(100vh - 500rpx);" @scrolltolower="loadMore">
					<view class="list_wrap" v-if="userList.length">
						<view class="list_item" v-for="(item, index) in userList" :key="index">
							<view class="left_wrap ">
								<view class="flex_align">
									<image class="avatar_img" :src="item.avatar" mode="aspectFill"></image>
									<text class="name">{{ item.nickname }}</text>
									<view class="loginTips flex_center_align ml20" v-if="item.loginstatus == 0">未登录</view>
									<view v-if="item.second == 1" style="height: 40rpx; line-height: 40rpx;" class="inviteTips">
										间接邀请
									</view>
								</view>
							</view>
							<view class="right_wrap">
								{{ item.createtime_str }}
							</view>

						</view>
					</view>
					<view v-if="userList.length == 0 && !isLoading" class="empty_wrap flex_col">
						<image class="empty_img" src="@/static/img/my/invite/invite_empty.png"></image>
						<text class="tips">暂无邀请记录</text>
						<view class="btn flex_center_align" @click="openQrCode">
							去邀请</view>
					</view>
					<view v-if="userList.length == 0 && isLoading" class="loading">
						<u-loading-icon></u-loading-icon>
					</view>
					<uni-load-more v-if="userList.length != 0" :status="status"></uni-load-more>
				</scroll-view>
				<view class="invite flex_center_align" hover-class="none" @click="openQrCode">
					<text>我要邀请</text>
				</view>
			</view>
		</view>


		<view>
			<u-popup ref="popup" :show="showMore" :round="16" mode="center" @close='close'
				:customStyle="{ width: '570rpx', minHeight: '712rpx', padding: '10px', backgroundImage: `url(@/static/img/my/invite/qr_code.png)` }">
				<view class="popup_content">
					<view class="popup_text flex_col ">
						<text>小竹-法规库</text>
						<text class="fz30 c666">让天下没有难懂的财税</text>
					</view>
					<view class="popup_img">
						<image :src="shareEwm" class="popup_ewm" @click="openEwm"></image>
					</view>
					<view class="popup_button">扫码下载APP</view>
				</view>
			</u-popup>
			<u-popup ref="popup2" :show="showBottom" :round="16" mode="bottom" @close='close'>
				<view class="footer">
					<view class="footer_content" @click="goShareWx()">
						<image class="img" src="/static/img/my/invite/wx_icon.png"></image>
						<text class="text">发微信</text>
					</view>

					<view class="footer_content" @click="saveEwm()">
						<image class="img" src="/static/img/my/invite/qr_code_icon.png"></image>
						<text class="text">保存二维码</text>
					</view>
				</view>
			</u-popup>

		</view>

		<u-modal :show="showRules" title="规则" :closeOnClickOverlay="true" @close="showRules = false"
			:showConfirmButton="false">
			<view class="gz-pop flex_col">
				<u-parse :content="list.content"></u-parse>
			</view>
		</u-modal>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/my/Invite"></script>

<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #fff;

	.title_bar {
		position: relative;
	}

	/deep/ .title_text {
		font-size: 32rpx;
	}

	/deep/ .arrow {
		width: 82rpx;
		height: 82rpx;
	}
}

.header_wrap {
	position: fixed;
	top: 0;
	left: 0;
	height: 416rpx;
	width: 100%;
	background: url('../../../static/img/my/invite/invite_bg.png');
	background-size: 100%;
	padding: 140rpx 30rpx 100rpx;
}

.content {
	margin-top: 40rpx;
	padding: 0 30rpx;
	position: relative;

	.invite_num {
		height: 160rpx;
		display: flex;

		.num_item {
			margin: 0 auto;
			text-align: center;
			padding: 30rpx 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #fff;

			.num {
				font-size: 44rpx;
				font-weight: 500;
			}

			.person_num {
				white-space: nowrap;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}


	.invite_list {
		padding: 0 30rpx;

		.header {
			margin-top: 44rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0px 9rpx 20rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 165rpx;

			.tab_active {
				color: #4281C1;
			}
		}


		.list_wrap {
			margin-top: 60rpx;
			padding: 13rpx 0;

			.list_item {
				position: relative;
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				padding: 0 10rpx;

				&:nth-child(2n) {
					border-bottom: 1rpx solid #EDEDED;
				}

				.avatar_img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.name {
					font-weight: 500;

				}

				.loginTips {
					width: 110rpx;
					height: 48rpx;
					border-radius: 50rpx;
					background-color: #f6f6f6;
					color: #999;
					font-size: 24rpx;
				}

				.right_wrap {
					font-size: 24rpx;
					color: #B8B8B8;
				}

				.inviteTips {
					margin-left: 20rpx;
					padding: 0 10rpx;
					text-align: center;
					height: 34rx !important;
					border-radius: 516rpx;
					border: 1rpx solid #22B63B;
					font-size: 20rpx !important;
					color: #22B63B;
				}
			}
		}


		.empty_wrap {
			padding: 80rpx 0 100rpx;
			align-items: center;

			.empty_img {
				width: 262rpx;
				height: 240rpx;
			}

			.tips {
				margin-top: 60rpx;
				font-size: 28rpx;
				color: #727B7F;
			}

			.btn {
				font-size: 28tpx;
				margin-top: 40rpx;
				color: #4DA1FF;
				width: 212rpx;
				height: 76rpx;
				border-radius: 38rpx;
				border: 2px solid #4DA1FF;
			}
		}

		.loading {
			height: 640rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.invite {
			margin-left: 58rpx;
			position: fixed;
			left: 0;
			bottom: 30rpx;
			width: 640rpx;
			height: 74rpx;
			background: #3f9cf9;
			border-radius: 46rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
}









/deep/.u-modal__content {
	flex-direction: column !important;
}

.popup_content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popup_text {
	margin-top: 50rpx;
	align-items: center;
	font-size: 50rpx;
	line-height: 70rpx;
}

.popup_img {
	margin-top: 40rpx;
}

.popup_ewm {
	width: 360rpx;
	height: 360rpx;
}

.popup_button {
	margin: 40rpx 0;
}

.popup_button .button_ewm {
	width: 207rpx;
	height: 66rpx;
	border-radius: 132rpx;
	background-color: #1C87F3;
	color: #fff;
	font-size: 26rpx;
}

.footer {
	position: absolute;
	bottom: 0;
	height: 146rpx;
	width: 750rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-around;

	.footer_content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: 66rpx;
			height: 66rpx;
		}

		.text {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #333;
		}
	}

}
</style>
